<template>
	<div style="width: 100%;height:90%">
		<div class="title">
			<div class="list-title">用户名</div>
			<div class="list-title">地区</div>
			<div class="list-title">回收物</div>
			<div class="list-title">回收量</div>
			<div class="list-title">时间</div>
		</div>
		<div class="infos" >
				<ul id="scrolldata">
					<!-- <li class="info">
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区1</div>
					</li> -->

				</ul>

		</div>
	</div>
</template>

<script>
export default {
  name: 'scroll',
  props: ['scrolldata'],
  data () {
    return {

    }
  },
  methods: {

  },
  watch: {
    scrolldata (newval, oldval) {
      var cent = document.getElementById('scrolldata')
      cent.innerHTML = ''
      if (newval.length !== 0) {
        for (var i = 0; i < newval.length; i++) {
          cent.innerHTML += "<li class='info'>" +
									"<div class='list-info'>" + newval[i].delivery + '</div>' +
									"<div  class='list-info'>" + newval[i].accountNumbers + '</div>' +
									"<div class='list-info'>" + newval[i].type + '</div>' +
									"<div class='list-info'>" + newval[i].weight + 'g' + '</div>' +
									"<div class='list-info'>" + newval[i].time + '</div>' +
									'</li>'
        }
        for (var i = 0; i < 4; i++) {
          cent.innerHTML += "<li class='info'>" +
									"<div class='list-info'>" + newval[i].delivery + '</div>' +
									"<div  class='list-info'>" + newval[i].accountNumbers + '</div>' +
									"<div class='list-info'>" + newval[i].type + '</div>' +
									"<div class='list-info'>" + newval[i].weight + 'g' + '</div>' +
									"<div class='list-info'>" + newval[i].time + '</div>' +
									'</li>'
        }
      }
    }
  }
}
</script>

<style>
	.title{
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.list-title{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		/* font-weight: 700; */
		/* color: #21f7b3; */
		color:rgb(181,186,195);

	}
	.infos{
		width: 100%;
		height: 80%;
		overflow: hidden;
		text-align: center;
        font-size: 14px;
	}

	@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-250%);
	  }
	}

	.infos>ul{
		animation: myMove 10s linear infinite;
		animation-fill-mode: forwards;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.infos>ul>li{
		width: 100%;
		height: 25%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.list-info{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
